<canvas id='canvas' width='1000px' height='600px'></canvas>
<script type="text/javascript">
	var f = 1000,p = 600, d = 0.86 *f, l = 0.125 * f;
	var px = cx = 0.5 * f, py = cy = 0.5 * p;
	var x, y;
	var rub = 0.96;
	
	var Granule = function(){
		this.color = "rgb(" + Math.floor(255 * Math.random()) + "," + Math.floor(255 * Math.random()) + "," + Math.floor(255 * Math.random()) + ")";
        this.b = this.a = this.x = this.y = 0;
        this.size = 1;
	};
	Granule.prototype.move = function(){
		var a = this.a;
		var b = this.b;
		var c = this.x - cx;
		var k = this.y - cy;
		var g = Math.sqrt(c * c + k * k) || 0.001;
		c = c / g;
		k = k / g;
		if(g < d){
			s = 0.0014 * (1 - g / d) * f;
			a -= c * s;
			b -= k * s;
		}
		if(g < l){
			s = 2.6E-4 * (1 - g / l) * f;
			a += x * s;
			b += y * s;
		}
		a *= rub;
		b *= rub;
		c = Math.abs(a);
		k = Math.abs(b);
		0.1 > c && (a *= 3 * Math.random());
        0.1 > k && (b *= 3 * Math.random());
		g = 0.45 * 0.5 * (c + k);
		this.size = Math.max(Math.min(g, 3.5), 0.4);
		this.x += a;
	    this.y += b;
	    // this.x > f ? (this.x = f, a *= -1) : 0 > this.x && (this.x = 0, a *= -1);
	    // this.y > p ? (this.y = p, b *= -1) : 0 > this.y && (this.y = 0, b *= -1);
	    this.a = a;
	    this.b = b;
	};

	document.onmousemove = function(e){
		e = e || window.event;
		cx = e.clientX - canvas.offsetLeft;
		cy = e.clientY - canvas.offsetTop;
	}

	ctx = canvas.getContext('2d');
	granules = [];
	for(var i = 0; i < 3; i++){
		var g = new Granule();
		g.x = 0.5 * f;
		g.y = 0.5 * p;
		g.a = 34 * Math.cos(i) * Math.random();
		g.b = 34 * Math.cos(i) * Math.random();
		granules.push(g);
	}

	function draw(){
		ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "rgba(8,8,12,0.65)";
        ctx.fillRect(0, 0, f, p);
        ctx.globalCompositeOperation = "lighter";
        x = cx - px;
        y = cy - py;
        px = cx;
        py = cy;
        for(var i=0; i < granules.length; i++){
        	g = granules[i];
        	g.move();
	        ctx.fillStyle = g.color;
	        ctx.beginPath();
	        ctx.arc(g.x, g.y, g.size, 0, 2 * Math.PI, !0);
	        ctx.closePath();
	        ctx.fill();
	    }

	}
	setInterval(draw, 33);
</script>